<template>
  <div style="padding-top: 1px;min-height:150px;">
    <div class="item" v-for="item in courseList" :key="item.id">
      
        <div>
          <div class="courseName">{{item.studentName}}</div>
        </div>
        <div class="time">
          
          <div style="width: 465px;margin-right: 10px;">年龄：{{item.studentAge}}岁</div>
          <div style="width: 465px;margin-right: 10px;">剩余课时：{{item.classSurplusTime}}课时</div>
          <el-button
              v-if="item.marketingState!=0 && item.classSurplusTime!=0"
              size="16px"
              type="text"
              @click="handleMarketing(item)"
          >销课</el-button>
          <el-button
            v-if="item.marketingState==0 || item.classSurplusTime!=0"
            size="16px"
            type="text"
            @click="handleEvaluate(item)"
          >评价</el-button>
        </div>

    </div>

    <!-- 添加或修改课程日期对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>

        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="评价" prop="evaluate">
              <el-input type="textarea" v-model="form.evaluate"  placeholder="请输入评价" />
          </el-form-item>
          <el-form-item label="附件" >
              <imageUpload v-model="form.enclosure" :limit="3"/>
              <!-- <imageUpload v-model="form.enclosure2" :limit="1"/> -->
          </el-form-item>
          <el-form-item label="消课次数"  prop="xknumber" v-if="xkStatus">
              <el-input  v-model="form.xknumber" type="number"  placeholder="请输入消课次数" />
          </el-form-item>
        </el-form>
    

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>

      </el-dialog>

       <!-- 消课 -->
    <el-dialog title="学生消课数量" :visible.sync="xkopen" width="400px" append-to-body>
         <el-input type="number" v-model="xkNum"  placeholder="请输入消课数量" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="xksubmitForm">确 定</el-button>
        <el-button @click="xkcancel">取 消</el-button>
      </div>

      </el-dialog> 

  </div>
</template>

<script>
import { listCourseSchedule} from "@/api/school/course";
import { addMarketing} from "@/api/school/marketing";
import { updateForm,addForm,getForm} from "@/api/school/evaluate";
export default {
  data() {
    return {
      open: false,
      xkopen: false,
      title: "",
      // 表单参数
      form: {
        xknumber:''
      },
      // 表单校验
      rules: {
        evaluate: [
          { required: true, message: "请输入评价", trigger: "blur" },
        ],
        xknumber: [
          { required: true, message: "请输入消课次数", trigger: "blur" },
        ]
      },
      //消课数量
      xkNum:1,
      //消课请求参数
      xkparms:{

      },
      //是否显示消课
      xkStatus: true,
      courseList: [
        {
          id: '', // 购买课程id
          classId: '',
          classTime: '', // 总课时
          startTime: '',
          endTime: '',
          classSurplusTime: '', // 剩余课时
        }
      ]
    }
  },
  methods: {
    getData() {
      this.getCourseList()
    },
    // 获取报读课程
    getCourseList() {
      console.log(this.$route.query.courseNumber)
       
      listCourseSchedule({classId:this.$route.query.courseNumber,
      courseStartime:this.$route.query.startTime,
      counrseEndtime:this.$route.query.endTime}).then(res => {
        console.log(res)
        this.courseList = res.rows;
      })
    },
      /** 销课按钮操作 */
    handleMarketing(row) {
      this.xkparms={};
      const ids = row.studentName;
      var courseStartTimemark=this.$route.query.startTime;
      var courseEndTimemark=this.$route.query.endTime;
      var teacherIdmark=this.$route.query.teacherNumber;
      // this.$modal.confirm('是否对"' + ids + '"进行销课？').then(function() {
        
        //var parms={};
        this.xkparms.courseStartime=courseStartTimemark;
        this.xkparms.counrseEndtime=courseEndTimemark;
        this.xkparms.courseId=row.classId;
        this.xkparms.studentId=row.studentId;
        this.xkparms.teacherId=teacherIdmark;
        this.xkparms.state='0';
        this.xkparms.classSurplusTime=row.classSurplusTime;
        this.xkparms.byclassid=row.id;
        this.xkopen=true;
        //return addMarketing(parms);
      // }).then(() => {
      //   this.getData();
      //   this.$modal.msgSuccess("销课成功");
      // }).catch(() => {});
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        startTime: null,
        endTime: null,
        courseNumber: null,
        studentNumber: null,
        evaluate: null,
        enclosure: null,
        // enclosure1: null,
        // enclosure2: null,
        evaluator: null,
        xknumber:1,
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //消课取消按钮
    xkcancel(){
      this.xkopen = false;
      this.xkparms={};
    },
    xksubmitForm(){
      var xkNum=this.xkNum;

      if(xkNum!=null&&xkNum!=''&&xkNum>0){
         this.xkparms.xknumber=xkNum;
         addMarketing(this.xkparms).then(response => {
              this.$modal.msgSuccess("消课成功");
              this.xkopen = false;
              this.getData();
          });
      }else{
        this.$modal.msgError("请输入消课数量");
      }
    },
    /** 提交按钮 */
    submitForm() {
      var courseStartTimesub=this.$route.query.startTime;
      var courseEndTimesub=this.$route.query.endTime;
      var teacherIdsub=this.$route.query.teacherNumber;

      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            addForm(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getData();
            });
          } else {
            this.form.startTime=courseStartTimesub;
            this.form.endTime=courseEndTimesub;
            this.form.evaluator=teacherIdsub;
            addForm(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getData();
            });
          }
        }
      });
    },
    handleEvaluate(row){
      this.reset();
      if(row.marketingState==0){
          this.xkStatus=false;
      }
      const id = row.evaluationId
      if(id !=null){
        getForm(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改课程评价";
        });
      }else{
          this.form.courseNumber=row.classId;
          this.form.studentNumber=row.studentId;
          this.form.teacherId=row.startTime;
          this.open = true;
          this.title = "新增课程评价";
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .item {
    box-shadow: 0px 2px 5px 0px rgba(150, 150, 150, 0.2);
    margin: 0px 3px 20px;
    padding: 20px;
    box-sizing: border-box;
    color: #737373;
    .courseName {
      font-size: 16px;
      color: #333;
      font-weight: 600;
    }
    .time {
      display: flex;
      align-items: center;
      margin: 1px 0px;
    }
    .date {
      display: flex;
      align-items: center;
    }
  }
</style>